<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0"/>

    <title>签证证件申请</title>
    <link rel="stylesheet" href="/css/weui.css"/>
    <link rel="stylesheet" href="/css/main.css"/>
    <script src="/js/vue.min.js"></script>
    <script src="/js/common.js"></script>
    <script src="/data/options.js"></script>
    <script src="/js/jquery-3.3.1.min.js"></script>


</head>
<body>
<div class="page__bd" id="app">
    <div id="main_container" :class="{'hidden_div':csdDisplay||gjdqDisplay}">
        <div class="weui-cells__title" style="background-color: #f0f0f0;">
            基本信息
        </div>
        <div class="weui-cells">


            <div class="weui-cell">
                <div class="weui-cell__bd" style="flex: 1">
                    姓
                </div>
                <div class="weui-cell__ft" style="flex: 3">
                    <input class="weui-input normal_input" v-model="ywx" placeholder="英文姓"/>
                </div>
                <div class="div_blank"></div>
                <div class="weui-cell__bd" style="flex: 1">
                    名
                </div>
                <div class="weui-cell__ft" style="flex: 3">
                    <input class="weui-input normal_input" v-model="ywm" placeholder="英文名"/>
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    中文姓名
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input normal_input" v-model="form.zwxm" placeholder="请输入中文姓名"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    申请人电话
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input normal_input" v-model="form.jnlxdh" type="number" placeholder="请输入境内联系电话"/>
                </div>
            </div>


            <div class="weui-cell_select weui-cell">
                <div class="weui-cell__bd">
                    国家/地区
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <!--<select class="weui-select" v-model="form.gjdq" placeholder="请选择国家/地区">-->
                        <!--<option v-for="gjdq in gjdqOptions" :value="gjdq.key">{{gjdq.key}} {{gjdq.value}}</option>-->
                    <!--</select>-->
                    <div onclick="showPickGjdq();" style="height: 45px;line-height: 45px;padding-right: 12px;">{{gjdqName}}</div>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    出生日期
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input  normal_input" v-model="form.csrq" type="number"
                           placeholder="格式如20181001"/>
                </div>
            </div>

            <div class="weui-cell_select weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    出生地
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <!--<select class="weui-select" v-model="form.csd">-->
                        <!--<option v-for="csd in csdOptions" :value="csd.key">{{csd.key}} {{csd.value}}</option>-->
                    <!--</select>-->
                    <div onclick="showPickCsd();" style="height: 45px;line-height: 45px;padding-right: 12px;">{{csdName}}</div>

                </div>
            </div>

            <div class="weui-cell_select weui-cell">
                <div class="weui-cell__bd">
                    性别
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <select class="weui-select" v-model="form.xb">
                        <option value="1">男</option>
                        <option value="2">女</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    在华住址
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input normal_input" v-model="form.jnjzdxxdz" placeholder="境内居住地详细地址"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    联系人姓名
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input normal_input" v-model="form.dbr" placeholder="请输入联系人姓名"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    联系人电话
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input normal_input" v-model="form.dbrlxdh" type="number" placeholder="请输入联系人电话"/>
                </div>
            </div>
        </div>

        <div class="weui-cells__title" style="background-color: #f0f0f0;">
            现持护照签证信息
        </div>
        <div class="weui-cells">
            <div class="weui-cell_select weui-cell">
                <div class="weui-cell__bd">
                    护照种类
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <select class="weui-select" v-model="form.xczjzl">
                        <option value="14">普通护照</option>
                        <option value="11">外交护照</option>
                        <option value="12">公务护照</option>
                        <option value="99">其他</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    护照号码
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input normal_input" v-model="xczjhm" placeholder="请输入本人护照号码"/>
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    护照有效期至
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <input class="weui-input normal_input " type="number" placeholder="格式如20181001"
                           v-model="form.xczjyxqz"/>
                </div>
            </div>

            <div class="weui-cell_select weui-cell">
                <div class="weui-cell__bd">
                    现持有效签证证件种类
                </div>
                <div class="weui-cell__ft">
                    <select class="weui-select" v-model="form.xcqzzl">
                        <option v-for="x in xcqzzlOptions" :value="x.key">{{x.value}}</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell" :class="{hidden_div:xcqzDisplay}">
                <div class="weui-cell__bd weui-cell__primary">
                    现持签证证件号码
                </div>
                <div class="weui-cell__ft">
                    <input class="weui-input normal_input" v-model="form.xcqzhm" placeholder="请输入签证证件号码"/>
                </div>
            </div>
            <div class="weui-cell" :class="{hidden_div:xcqzDisplay}">
                <div class="weui-cell__bd weui-cell__primary">
                    现持签证有效期至
                </div>
                <div class="weui-cell__ft">
                    <input class="weui-input normal_input " type="number" placeholder="格式如20181001"
                           v-model="form.xcqzyxqz"/>
                </div>
            </div>


        </div>


        <div class="weui-cells__title" style="background-color: #f0f0f0;">
            申请信息
        </div>
        <div class="weui-cells weui-cells_checkbox">
            <div class="weui-cell_select weui-cell">
                <div class="weui-cell__bd">
                    申请证件类别
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <select class="weui-select" v-model="form.sqlb">
                        <option v-for="s in sqlbOptions" :value="s.key">{{s.value}}</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell_select weui-cell">
                <div class="weui-cell__bd">
                    办证类别
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <select class="weui-select" v-model="form.bzlx">
                        <option v-for="b in bzlbOptions" :value="b.key">{{b.value}}</option>

                    </select>
                </div>
            </div>
            <div class="weui-cell_select weui-cell" :class="{hidden_div:sqqzDisplay}">
                <div class="weui-cell__bd">
                    申请签证种类
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <select class="weui-select" v-model="form.sqqzzl">
                        <option v-for="s in sqqzzlOptions" :value="s.key">{{s.key}} - {{s.value}}</option>
                    </select>
                </div>
            </div>
            <div class="weui-cell_select weui-cell" :class="{hidden_div:sqtlDisplay}">
                <div class="weui-cell__bd">
                    {{jlxksyTitle}}
                </div>
                <div class="weui-cell__ft" style="flex: 2;">
                    <select class="weui-select" v-model="form.jlxksy">
                        <option v-for="sy in jlxksyOptions" :value="sy.key">{{sy.value}}</option>
                    </select>
                </div>
            </div>

            <div class="weui-cell">
                <div class="weui-cell__bd weui-cell__primary">
                    申请停留期限至
                </div>
                <div class="weui-cell__ft">
                    <input class="weui-input normal_input" type="number" placeholder="格式如20181001"
                           v-model="form.qzyxqz"/>
                </div>
            </div>
            <div style="display: none;">
                <form id="wgrtbForm" name="wgrtbForm" method="post" action="/wgrtb/page/submit">
                    <input type="hidden" v-model="formJson" name="formJson" id="zggmtbJson"/>
                </form>
            </div>

        </div>


        <div class="button_area">
            <a class="weui-btn weui-btn_primary" v-on:click="submit">提 交 申 请</a>
        </div>

    </div>
    <div id="gjdqPicker" :class="[{'hidden_div':!gjdqDisplay}]">

        <div class="weui-search-bar weui-search-bar_focusing" id="searchBar">
            <div class="weui-search-bar__box" style="background-color: white;border-radius: 3px;">
                <i class="weui-icon-search"></i>
                <input  v-model="gjdqKeyword" type="search" class="weui-search-bar__input " id="searchInput" placeholder="搜索"  />
                <a href="javascript:showPickGjdq();" class="weui-icon-clear" id="searchClear"></a>
            </div>
            <a href="javascript:hidePickGjdq();" class="weui-search-bar__cancel-btn" id="searchCancel">取消</a>
        </div>
        <div class="weui-cells" style="margin: 0;">
            <div class="weui-cell" v-for="gjdq in gjdqOptionList">
                <div class="weui-cell__ft" style="text-align: left">
                    <a :href="clickGjdq(gjdq.key)" style="color: #8a8a8a;width: 100%;display: inline-block">{{gjdq.key}} - {{gjdq.value}}</a>
                </div>
            </div>
        </div>
    </div>

    <div id="csdPicker" :class="[{'hidden_div':!csdDisplay}]">

        <div class="weui-search-bar weui-search-bar_focusing" >
            <div class="weui-search-bar__box" style="background-color: white;border-radius: 3px;">
                <i class="weui-icon-search"></i>
                <input  v-model="csdKeyword" type="search" class="weui-search-bar__input " placeholder="搜索"  />
                <a href="javascript:showPickCsd();" class="weui-icon-clear" ></a>
            </div>
            <a href="javascript:hidePickCsd();" class="weui-search-bar__cancel-btn" >取消</a>
        </div>
        <div class="weui-cells" style="margin: 0;">
            <div class="weui-cell" v-for="csd in csdOptionList">
                <div class="weui-cell__ft" style="text-align: left">
                    <a :href="clickCsd(csd.key)" style="color: #8a8a8a;width: 100%;display: inline-block">{{csd.key}} - {{csd.value}}</a>
                </div>
            </div>
        </div>
    </div>

</div>

<div class="js_dialog" id="iosDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog">
        <div class="weui-dialog__bd" id="dialogContent">弹窗内容，告知当前状态、信息和解决方法，描述文字尽量控制在三行内</div>
        <div class="weui-dialog__ft">
            <a href="javascript:hideDialog();" class="weui-dialog__btn weui-dialog__btn_primary">知道了</a>
        </div>
    </div>
</div>

<div class="js_dialog" id="gjdqDialog" style="display: none;">
    <div class="weui-mask"></div>
    <div class="weui-dialog" >

    </div>
</div>


<script>


</script>

<script src="/js/wgrtb.js"></script>
</body>
</html>